<template>
    <div class="conter-item">
        <div class="item-left">
            <div class="leftbot">
                <div class="botone">
                    <div class="botone-one">
                        <div class="itemone-left iconfont icon-shiyongzhong"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">使用中</div>
                            <div class="itemone-r-bot">{{ topobj.use }}<span>个</span> </div>
                        </div>
                    </div>
                    <div class="botone-two">
                        <div class="itemone-left iconfont icon-yixianzhi"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">闲置中</div>
                            <div class="itemone-r-bot">{{ topobj.free }}<span>个</span> </div>
                        </div>
                    </div>
                    <div class="botone-three">
                        <div class="itemone-left iconfont icon-repairing"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">报修中</div>
                            <div class="itemone-r-bot">{{ topobj.repair }}<span>个</span> </div>
                        </div>
                    </div>
                    <div class="botone-four">
                        <div class="itemone-left iconfont icon-baofei"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">已报废</div>
                            <div class="itemone-r-bot">{{ topobj.scrap }}<span>个</span> </div>
                        </div>
                    </div>

                </div>
                <div class="bottwo">
                    <div class="bottwo-left" ref="bottwoleft"></div>
                    <div class="bottwo-right" ref="bottworight"></div>
                </div>
                <div class="botthree">
                    <div class="botthree-left" ref="botthreeleft"></div>
                    <div class="botthree-right" ref="botthreeright"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import bus from '../../common/bus';
import { getCountBase, getUsePie, getCountScrapBar, getCountInBar, getCountAreaPie } from '../../../api/index'
export default {
    name: "generalsit-uation",
    props: {},
    components: {},
    data() {
        return {
            topobj: {},
            collapse: false,
            chart: null,
            chart1: null,
            clart2: null,
            chart3: null,

        }
    },
    computed: {},
    watch: {
        collapse(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.handleResize()
            }
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', (msg) => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    },
    mounted() {
        // 空心饼形图
        this.chart = echarts.init(this.$refs.bottwoleft);
        // 实心饼形图
        this.chart1 = echarts.init(this.$refs.botthreeright);
        this.chart2 = echarts.init(this.$refs.bottworight);
        this.chart3 = echarts.init(this.$refs.botthreeleft);
        // 监听窗口大小变化，调用 resize() 方法重新渲染
        window.addEventListener('resize', this.handleResize);
        this.solid()
        this.getCountBases()
        this.render()
        this.inventory()//报修报废
        this.consumables()//入库
    },
    methods: {
        // 资产入库统计
        async consumables() {
            const data = await getCountInBar()
            const arr = data.data.data ? data.data.data : { xdata: [''], ydata: ['0'] }

            this.consumablesChart(arr)//入库

        },
        // 保修报废统计
        async inventory() {
            const data = await getCountScrapBar()
            const arr = data.data.data ? data.data.data : { xdata: [''], repair: ['0'], scrap: ['0'] }

            this.inventoryChart(arr)
        },
        // 资产使用部门
        async solid() {
            const data = await getUsePie()
            this.solidChart(data.data.data)
        },
        // 资产区域统计
        async render() {
            const data = await getCountAreaPie()
            this.renderChart(data.data.data)
        },
        async getCountBases() {
            const data = await getCountBase()
            this.topobj = data.data.data
        },
        handleResize() {
            // 调用 resize() 方法进行图表的自适应
            // 获取父容器的宽度和高度
            setTimeout(() => {
                this.chart.resize();
                this.chart1.resize();
                this.chart2.resize();
                this.chart3.resize();
            }, 500);


        },
        //饼形图
        renderChart(e) {
            const chartOptions = {
                title: {
                    text: '资产区域统计',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                color: ['#919191', '#5087ec', '#68bbc4', '#58a55c', '#f2bd42',],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    top: '5%',
                    right: '5%',
                    data: e.name
                },
                series: [
                    {
                        itemStyle: {
                            // borderRadius: 10,
                        },
                        type: 'pie',
                        center: ['48%', '52%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: true,
                            fontSize: 12,
                            formatter: '{b}\n{d}%'
                            // position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },

                        labelLine: {
                            show: true//控制图例到图的连接线
                        },
                        data: e.data
                    }
                ]
            };
            const chartContainer = document.querySelector('.bottwo-left');
            const chartInstance = echarts.init(chartContainer);
            chartInstance.setOption(chartOptions);
        },
        //实心饼形图
        solidChart(e) {
            const chartOptions = {
                title: {
                    text: '资产使用部门',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                color: ['#ee752f', '#5087ec', '#68bbc4', '#58a55c', '#f2bd42',],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'verticla',
                    top: '5%',
                    right: '5%',
                    data: e.name
                },
                series: [
                    {
                        itemStyle: {
                            // borderRadius: 10,
                        },
                        type: 'pie',
                        // radius: ['55%', '80%'],
                        center: ['48%', '52%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: true,
                            fontSize: 12,
                            formatter: '{b}\n{d}%'
                            // position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },

                        labelLine: {
                            show: true//控制图例到图的连接线
                        },
                        data: e.data

                    }
                ]
            };
            const chartContainer = document.querySelector('.botthree-right');
            const chartInstance = echarts.init(chartContainer);
            chartInstance.setOption(chartOptions);
        },
        //报修报废
        inventoryChart(e) {
            const columnOption = {
                color: ['#5ab1ef', '#b6a2de',],
                title: {
                    text: '报修报废统计',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: { right: 50, top: 15 },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: e.xdata
                },
                yAxis: {
                    splitNumber: 5,
                    min: 0,
                    type: 'value',
                    boundaryGap: [0, 1]
                },
                series: [
                    {
                        name: '报修',
                        itemStyle: {
                            borderRadius: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ])
                        },
                        barWidth: 35, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.repair
                    },
                    {
                        name: '报废',
                        itemStyle: {
                            borderRadius: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                                {
                                    offset: 1,
                                    color: '#68bbc4'
                                }
                            ])
                        },
                        barWidth: 35, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.scrap
                    }
                ]
            };
            const chartcolumnContainer = document.querySelector('.botthree-left');
            const chartcolumnInstance = echarts.init(chartcolumnContainer);
            chartcolumnInstance.setOption(columnOption);
        },
        //耗材总览
        consumablesChart(e) {
            const columnOption = {
                color: ['#5ab1ef', '#b6a2de',],
                title: {
                    text: '资产入库统计',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: e.xdata
                },
                yAxis: {
                    splitNumber: 5,
                    min: 0,
                    type: 'value',
                    boundaryGap: [0, 1]
                },
                series: [

                    {
                        name: '入库',
                        itemStyle: {
                            borderRadius: 3,
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0, color: '#00feff' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#00feff' // 100% 处的颜色
                            }],)
                        },
                        barWidth: 35, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.ydata
                    }
                ]
            };
            const chartcolumnContainer = document.querySelector('.bottwo-right');
            const chartcolumnInstance = echarts.init(chartcolumnContainer);
            chartcolumnInstance.setOption(columnOption);
        }
    },
    beforeDestroy() {
        // 移除窗口大小变化的监听
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表
        this.chart.dispose();
        this.chart1.dispose();
        this.chart2.dispose();
        this.chart3.dispose();

    },
}
</script>

<style lang="less" scoped>
.conter-item {
    width: calc(100%);
    height: calc(100%);
    // background-color: aquamarine;
    // padding: 10px;
    display: flex;

    .item-left {
        // background-color: aqua;
        width: 100%;
        height: 100%;
        // margin-right: 10px;


        .lefttop {
            height: 6%;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;


        }

        .leftbot {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .botone {
                height: calc(12% - 30px);
                background-color: #fff;
                display: flex;
                padding: 5px 0;

                .botone-one,
                .botone-two,
                .botone-three,
                .botone-four {
                    border-right: 1px solid #cecaca;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 25%;

                    // height: calc(100% - 20px);
                    .itemone-left {
                        margin-right: 10px;
                    }

                    .icon-shiyongzhong {
                        color: rgb(5, 133, 22);
                        font-size: 37px;
                        border-radius: 50%;
                        padding: 8px;
                        background-color: rgba(176, 218, 178, 0.288);
                    }

                    .icon-yixianzhi {
                        color: rgb(22, 19, 223);
                        font-size: 37px;
                        border-radius: 50%;
                        padding: 8px;
                        background-color: rgba(176, 196, 218, 0.301);
                    }

                    .icon-repairing {
                        color: rgb(118, 126, 5);
                        font-size: 37px;
                        border-radius: 50%;
                        padding: 8px;
                        background-color: rgba(217, 218, 176, 0.616);

                    }

                    .icon-baofei {
                        color: rgb(240, 6, 6);
                        font-size: 37px;
                        border-radius: 50%;
                        padding: 8px;
                        background-color: rgba(218, 196, 176, 0.384);

                    }

                    .itemone-right {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .itemone-r-top {
                            font-size: 17px;
                            font-weight: bold;
                        }

                        .itemone-r-bot {
                            font-size: 17px;
                            font-weight: bold;

                            span {
                                font-size: 14px;
                                font-weight: 400;
                                margin-left: 10px;
                            }
                        }
                    }


                }

                .botone-four {
                    border-right: 0;

                }
            }

            .bottwo {
                height: 44%;
                display: flex;

                .bottwo-left {
                    width: calc(50% - 5px);
                    margin-right: 10px;
                    background-color: #fff;

                }

                .bottwo-right {
                    background-color: #fff;
                    width: calc(50% - 5px);

                }
            }

            .botthree {
                height: 44%;
                display: flex;

                .botthree-left {
                    width: calc(50% - 5px);
                    margin-right: 10px;
                    background-color: #fff;

                }

                .botthree-right {
                    background-color: #fff;
                    width: calc(50% - 5px);

                }
            }
        }
    }


}
</style>